<script lang="ts" setup>
import {onBeforeMount, ref, watch} from "vue";
import type {ResponseInterface, TaskInterface, UserInterface} from "@/type/models";
import {getAPI} from "@/api/MyAxiosAPI";
import {ElMessage} from "element-plus";

// API
const MOCK = false
const API = getAPI(MOCK)

let props = defineProps(['phaseId', "reFlushPhaseId"])
const pId = localStorage.getItem("currentlyProjectId")

// 监听reFlushPhaseId是否和当前phaseId一致，如果一致就刷新task
watch(() => props.reFlushPhaseId, (newValue) => {
  if (newValue == props.phaseId) {
    getTaskListAPI()
  }
})
// tag
const tagMsg: Array<string> = ["准备中", "进行中", "已结束"]
const tagColor: Array<string> = ["success", "warning", "info"]
//获取task list
const taskList = ref<Array<TaskInterface>>([])

function getTaskListAPI() {
  taskList.value.splice(0, taskList.value.length)
  API({
    url: "/project/phase/task/view",
    method: "get",
    headers: {
      Authorization: localStorage.getItem("token")
    },
    params: {
      phaseId: props.phaseId,
      pId: pId
    }
  }).then((res) => {
    let r: ResponseInterface = res.data
    if (r.code == 200) {
      taskList.value.push(...r.data)
    }
  })
}

// task 详情
const taskInfo = ref<TaskInterface>({})
let taskInfoDialog = ref(false)
let taskUserList = ref<Array<UserInterface>>([])

function clickTaskInfo(taskId: string) {
  for (let task of taskList.value) {
    if (task.taskId === taskId) {
      taskInfo.value = task;
      break;
    }
  }
  stringToDate(taskInfo.value)
  getUserByTaskIdAPI(taskId)
  taskInfoDialog.value = true
}

function stringToDate(task: TaskInterface) {
  task.beginTime = new Date(taskInfo.value.beginTime)
  task.endTime = new Date(taskInfo.value.endTime)
}

function getTaskInfoAPI(taskId: string) {
  API({
        url: "/project/phase/task/info",
        method: "get",
        headers: {
          Authorization: localStorage.getItem("token")
        },
        params: {
          taskId: taskId,
        }
      }
  ).then((res) => {
    let r: ResponseInterface = res.data
    if (r.code == 200) {
      taskInfo.value = r.data
    }
  })
}

function getUserByTaskIdAPI(taskId: string) {
  API({
        url: "/project/phase/task/user/list",
        method: "get",
        headers: {
          Authorization: localStorage.getItem("token")
        },
        params: {
          taskId: taskId,
        }
      }
  ).then((res) => {
    let r: ResponseInterface = res.data
    if (r.code == 200) {
      taskUserList.value = r.data
    }
  })
}

function changeTaskStatus() {
  changeTaskStatusAPI(taskInfo.value);
}

function changeTaskStatusAPI(task: TaskInterface) {
  API({
    url: "/project/phase/task/changeStatus",
    method: "POST",
    headers: {
      Authorization: localStorage.getItem("token")
    },
    data: task
  }).then((res) => {
    let r: ResponseInterface = res.data
    if (r.code == 200) {
      ElMessage.success("修改成功")
    }
  })
}
// 删除
function deleteTaskAPI(task:TaskInterface){
  API({
    url:"/project/phase/task/real_delete",
    method:"DELETE",
    headers: {
      Authorization: localStorage.getItem("token")
    },
    data: task
  }).then((res) => {
    let r: ResponseInterface = res.data
    if (r.code == 200) {
      ElMessage.success("删除成功")
      taskInfoDialog.value = false;
      getTaskListAPI()
    }
  })
}

// --- 生命周期 ---
onBeforeMount(() => {
  getTaskListAPI()
})
// --- 生命周期 end ---
</script>

<template>
  <el-table
      :data="taskList">
    <el-table-column label="任务名称" prop="name"/>
    <el-table-column label="任务状态" prop="status">
      <template #default="scope">
        <el-tag :type="tagColor[scope.row.status]">{{ tagMsg[scope.row.status] }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button @click="clickTaskInfo(scope.row.taskId)">详情</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div>
    <el-dialog
        v-model="taskInfoDialog">
      <el-descriptions :column="2" border title="任务详情">
        <el-descriptions-item label="任务名称">{{ taskInfo.name }}</el-descriptions-item>
        <el-descriptions-item label="任务状态">
          <el-select
              v-model="taskInfo.status"
              @change="changeTaskStatus"
              placeholder="请选择">
            <el-option
                v-for="(item, index) in tagMsg"
                :key="index"
                :label="item"
                :value="index">
              <el-tag :type="tagColor[index]">{{ tagMsg[index] }}</el-tag>
            </el-option>
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="开始时间">{{ taskInfo.beginTime.toLocaleString() }}</el-descriptions-item>
        <el-descriptions-item label="结束时间">{{ taskInfo.endTime.toLocaleString() }}</el-descriptions-item>
        <el-descriptions-item label="任务内容">{{ taskInfo.description }}</el-descriptions-item>
      </el-descriptions>
      <p>参与人员</p>
      <el-table :data="taskUserList">
        <el-table-column label="昵称" prop="nickname"/>
        <el-table-column label="邮箱" prop="email"/>
      </el-table>
      <template #footer>
        <div>
          <el-popconfirm title="确定要删除吗？" @confirm="deleteTaskAPI(taskInfo)">
            <template #reference>
              <el-button>删除</el-button>
            </template>
          </el-popconfirm>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>

</style>